<template>
    <el-container class="header-wrapper">
        <header class="header">
            <el-row type="flex" class="container" :gutter="20">
                <el-col :span="6" >
                    <div class="logo-wrapper">
                        <img class="logo-img" src="@/assets/youp-logo.png"/>
                    </div>
                </el-col>
                <el-col :span="6" :offset="1">
                    <div>
                        <el-input placeholder="请输入内容" v-model="headerSearch" prefix-icon="el-icon-search">
                        </el-input>
                    </div>
                </el-col>
                <el-col :span="4" :offset="1">
                    工作
                </el-col>
                <el-col :span="4">
                    工作
                </el-col>
                <el-col :span="4">
                    个人中心
                </el-col>
                <el-col :span="4">
                    git测试
                </el-col>
            </el-row>
        </header>
    </el-container>
</template>
<script>
export default {
  name: 'HomeHeader',
  data () {
    return {
      headerSearch: ''
    }
  }
}
</script>
<style lang="stylus" scoped>
    .header
      position:relative
      top: 0
      left: 0
      width: 100%
      height:80px
      line-height:80px
      background-color: #fff
      .container
        height: 100%
        width: 100%;
        margin: 0 auto;
        box-sizing: border-box
        border-bottom: 1px solid #dcdfed
        .logo-wrapper
          position: relative
          height: 80px
          border: 1px solid red
          .logo-img
            position: absolute
            top: 50%
            left: 50%
            transform: translate(-50%, -50%)
</style>
